<template>
  <div class="app">
    <TabBar :tabs="tabs" @tabClick="tabChange" :currentIndex="currentIndex"></TabBar>
    <h2>{{ info[currentIndex] }}</h2>
  </div>
</template>

<script>
// import TabBar from "./components/TabBar.vue";
import TabBar from '@/components/TabBar.vue'  //@从src开始搜寻
export default {
  data() {
    return {
      tabs: ['电脑', '手机', '平板'],
      info: ['电脑页面', '手机页面', '平板页面'],
      currentIndex: 0,
    }
  },
  components: {
    TabBar
  },
  methods: {
    tabChange(n) {
      this.currentIndex = n
      // alert(this.currentIndex)
    },
    index() {
      this.index + 1
    }
  }
}
</script>
<style scoped>
.app {
  width: 800px;
  margin: 0 auto;
}
</style>